<template>
	<view class="shop">
		<view class="header">
			<view class="l">身份证</view>
			<view class="r">{{data.card.replace(/^(.{6})(?:\d+)(.{4})$/, '\$1******\$2') }}</view>
		</view>
		
		<view class="header">
			<view class="l">商户名称</view>
			<view class="r">{{data.shopname}}</view>
		</view>
		
		<view class="info" v-if="data.skill_image">
			<view class="t">理疗师职业资格证书</view>
			<view class="imgs">
				<image :src="$oss(data.skill_image)" mode="aspectFill" class="icon"></image>
				<view class="cover"></view>
			</view>

		</view>

		<view class="info" v-if="data.health_image">
			<view class="t">健康证</view>
			<view class="imgs">
				<image :src="$oss(data.health_image)" mode="aspectFill" class="icon"></image>
				<view class="cover"></view>
			</view>
		</view>
		
		<view class="info" v-if="data.business_image.length > 6">
			<view class="t">营业执照</view>
			<view class="imgs">
				<image :src="$oss(data.business_image)" mode="aspectFill" class="icon"></image>
				<view class="cover"></view>
			</view>
		</view>
		<zmm-watermark :watermark="watermark"></zmm-watermark>
	</view>
</template>

<script>
	import zmmWatermark from '@/components/zmm-watermark/components/zmm-watermark/zmm-watermark'
	export default {
		components: {
			zmmWatermark
		},
		data() {
			return {
				// config: this.$store.state.config,
				data: '',
				// watermark: '<h5>一点到家</h5>'
			};
		},
		computed: {
			config() {
				return this.$store.state.config
			},
			watermark(){
				return `<h5>${this.config.user_name}</h5>`
			}
		},
		onLoad(options) {
			this.data = options
			console.log(this.data)
			// this.watermark = `<h5>${this.config.user_name}</h5>`
		}
	}
</script>

<style lang="scss" scoped>
.shop{
	height: 100vh;
	background: #F5F7F6;
	.header{
		width: 700rpx;
		margin: 0 auto 20rpx;
		background: #fff;
		height: 135rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		.icon{
			width: 39rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}
		.l{
			color: #3D3D3D;
			font-size: 28rpx;
			flex: 1;
		}
		.r{
			font-size: 32rpx;
			color: #19B564;
		}
		.real{
			width: 118rpx;
			height: 38rpx;
			margin-left: 10rpx;
		}
	}
	.info{
		width: 700rpx;
		margin: 0 auto 20rpx;
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.t{
			color: #3D3D3D;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.imgs{
			width: 490rpx;
			height: 289rpx;
			position: relative;
			.icon{
				width: 100%;
				height: 100%;
			}
			.water{
				position: absolute;
				left: 0;
				top: 0;
				width: 20%;
				height: 20%;
			}
			.cover{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: transparent;
			}
		}
	}
}
</style>
